<!--
 * @Autor: Kadia
 * @Date: 2021-07-01 13:42:47
 * @LastEditors: Kadia
 * @Connect: nefukadia@foxmail.com
 * @LastEditTime: 2021-07-01 17:56:11
-->
<template>
    <div v-loading="!prepare">
        <el-form style="width:40%;margin:0 auto;" ref="form" :model="form" label-width="80px" size="medium">
            <el-form-item label="商家名称">
                <el-input v-model="form.shopName" placeholder="用于展示给用户"></el-input>
            </el-form-item>
            <el-form-item label="登录邮箱">
                <el-input v-model="form.email" disabled placeholder="一个邮箱只能注册一次"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
                <el-input v-model="form.password" placeholder="请输入登录密码"></el-input>
            </el-form-item>
            <el-form-item label="商家头像">
                <el-upload :action="action" ref="upload" :show-file-list="false"
                :on-success="upLoad" accept="image/jpeg,image/png">
                    <img v-if="form.imageUrl!='#'" :src="form.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.tel" type="number" placeholder="请输入联系电话"></el-input>
            </el-form-item>
            <el-form-item label="店家地址">
                <el-input v-model="form.address" placeholder="请输入店家地址"></el-input>
            </el-form-item>
            <el-form-item label="起送价格">
                <el-input-number step-strictly v-model="form.reach" :min="1" ></el-input-number>
            </el-form-item> 
        </el-form>
        <div style="text-align:center;">
            <el-button class="botton" type="primary" @click="onSubmit">确认修改</el-button>
            <div style="height:80px;"></div>
            <div style="margin-top:10px;"><el-button class="botton" type="warning" @click="onClickStatus" v-text="form.status==1?'暂停营业':'恢复营业'"></el-button></div>
            <div style="margin-top:10px;"><el-button class="botton" type="danger" @click="onClickDelete">商家注销</el-button></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            action:this.myConfig.manageApiUrl+'/upload.php',
            prepare:false,
            form:{
                imageUrl:'#',
                reach:1
            }
        }
    },
    created(){
        const that=this;
        that.getShopInfo();
    },
    methods: {
        //get
        getShopInfo(){
            const that=this;
            that.prepare=false;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/getShopInfo.php',
                params:{
                    shopId:that.myConfig.shopId
                }
            }).then(function(res){
                if(res.data.errCode==200){
                    that.prepare=true;
                    that.form=res.data.form;
                }
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //上传图片
        upLoad(res) {
            const that=this;
            console.log(res.url);
            that.form.imageUrl=res.url;
        },
        //确认修改
        onSubmit(){
            const that=this;
            if(!that.form.hasOwnProperty('shopName')||!that.form.hasOwnProperty('email')||
            !that.form.hasOwnProperty('password')||!that.form.hasOwnProperty('tel')||
            !that.form.hasOwnProperty('address')||that.form.imageUrl=='#'){
                that.$message.warning('请完善表格信息');
                return ;
            }
            let isEmail = /^\w+\@+[0-9a-zA-Z]+\.(com|com.cn|edu|hk|cn|net)$/;
            if (!isEmail.test(that.form.email)){
                that.$message.warning('邮箱格式不正确');
                return ;
            }
            that.prepare=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/changeInfo.php',
                method:'post',
                data:{
                    shopId:that.myConfig.shopId,
                    form:that.form
                }
            }).then(function(res){
                that.prepare=true;
                if(res.data.errCode==200){
                    that.$message.success('修改成功');
                    that.getShopInfo();
                }else
                    that.$message.warning('系统繁忙，请稍后再试');
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //更改状态
        onClickStatus(){
            const that=this;
            that.prepare=true;
            that.$axios({
                url:that.myConfig.manageApiUrl+'/updateShop.php',
                method:'post',
                data:{
                    shopId:that.myConfig.shopId
                }
            }).then(function(res){
                that.prepare=true;
                if(res.data.errCode==200){
                    that.getShopInfo();
                }else
                    that.$message.warning('系统繁忙，请稍后再试');
            }).catch(function(err){
                that.$message.warning('系统繁忙，请稍后再试');
            });
        },
        //商家注销
        onClickDelete(){
            const that=this;
            this.$confirm('此操作将永久删除你的店铺信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function(){
                that.prepare=false;
                that.$axios({
                    url:that.myConfig.manageApiUrl+'/deleteShop.php',
                    method:'post',
                    data:{
                        shopId:that.myConfig.shopId
                    }
                }).then(function(res){
                    if(res.data.errCode==200){
                        that.$router.push({
                            name:'Index'
                        });
                    }
                })
                that.$router.push({
                    name:'Index'
                });
            });
        }
    }
}
</script>
<style scoped>
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px solid #c1c1c1;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>